<template>
    <label :class="cls">
        <input type="checkbox" />
        <IconHover :disabled="disabled">
            <span :class="[`${prefixCls}-icon`]">
                <IconCheck />
            </span>
        </IconHover>
        <span :class="[`${prefixCls}-label`]">
            <slot></slot>
        </span>
    </label>
</template>
<script lang="tsx">
import { getPrefixCls } from '../_utils/global-config';
import { defineComponent, computed } from 'vue';  // 引入computed
import IconHover from '../_components/IconHover/IconHover.vue';
import IconCheck from './iconCheck.vue';
export default defineComponent({
    name: "Checkbox",
    components: {
        IconHover,
        IconCheck
    },
    props: {
        /**
         * @zh 复选框是否选中
         * @en Whether the checkbox is checked
         * @default false
         */
        defaultChecked: {
            type: Boolean,
            default: false
        },
        /**
         * @zh 复选框的值
         * @en The value of the checkbox
         */
        value: {
            type:[String, Number, Boolean],
        },
        /**
         * @zh 复选框是否禁用
         * @en Whether the checkbox is disabled
         * @default false
         */
        disabled: {
            type: Boolean,
            default: false
        },
        /**
         * @zh 复选框是否为半选状态
         * @en Whether the checkbox is indeterminate
         * @default false
         */
        indeterminate: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const prefixCls = getPrefixCls('checkbox');
        const cls = computed(() => [
            prefixCls,
            {
                [`${prefixCls}-checked`]: false
            }
        ]);
        return {
            prefixCls,
            cls
        }
    }
})
</script>